<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">会员UID：</span>
                <el-input placeholder="输入会员UID" v-model.trim="user_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品名称：</span>
                <el-input placeholder="输入商品名称" v-model.trim="good_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择站点：</span>
                <el-select v-model="sites_id" clearable placeholder="请选择站点">
                    <el-option v-for="item in siteArrs" :key="item.dc_id" :label="item.title" :value="item.dc_id" />
                </el-select>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">选择日期：</span>
                <el-date-picker v-model="area_time" type="date" value-format="YYYY-MM-DD" :disabled-date="disabledDate" placeholder="请选择日期" />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>
        <el-tabs v-model="tabName" type="card" @tab-click="handleTab">
            <el-tab-pane v-for="tabs in tabArrs" :key="tabs.name" :label="tabs.label" :name="tabs.name">
                <!-- 批量操作 -->
                <div class="batch-oper" v-if="tabName == 0">
                    <el-button type="default" plain @click="clickPachSeat">批量放货</el-button>
                </div>
                <div class="table-head flexs">
                    <div class="table-check">
                        <el-checkbox v-model="allChecked" @change="changeAll" />
                    </div>
                    <div class="table-good table-head-base">商品信息</div>
                    <div class="table-supp table-head-base">供应商信息</div>
                    <div class="table-buy-info table-head-base">放货信息</div>
                    <!-- <div class="table-oper table-head-base">操作</div> -->
                </div>
                <!-- 内容 -->
                <div class="table-body" v-loading="loading">
                    <template v-if="arr_data.length > 0 && !loading">
                        <div class="table-item" v-for="(item, index) in arr_data" :key="item.order_id">
                            <div class="table-item-head flexs">
                                <div class="table-item__head-left">
                                    <div class="table-check" style="margin-right: 12px">
                                        <el-checkbox v-model="item.is_select" @change="changeOne" />
                                    </div>
                                    <p class="item-head__sn">订单编号：{{ item.order_sn }}</p>
                                    <p class="item-head__text">货架号：{{ item.shelve_title + item.shelve_num }}</p>
                                    <p class="item-head__text">
                                        站点名称：<span>{{ item.dc_title }}</span>
                                    </p>
                                </div>
                                <div class="table-item__head-right"></div>
                            </div>
                            <div class="table-item-cont">
                                <div class="table-good table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr">
                                            <el-image
                                                class="table-lr__img"
                                                loading="lazy"
                                                :src="proxy.imgUrl + item.product_img + '!img_400'"
                                                fit="cover"
                                                v-if="item.product_img"
                                            />
                                            <div class="table-lr__right table-right-other">
                                                <p class="lr-user">
                                                    {{ item.product_name }}，<span
                                                        >等级：{{ item.level }}，数量：{{ item.product_number }}{{ item.unit }}， 颜色：{{
                                                            item.color
                                                        }}，规格：{{ item.norm }}/{{ item.unit }}
                                                    </span>
                                                </p>
                                                <p class="lr-price"><em>￥</em>{{ item.product_price }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-supp table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <div class="table-lr">
                                            <!-- <el-image class="table-lr__img img-round" loading="lazy"
                                            :src="proxy.imgUrl + item.supplier_img + '!img_400'" fit="cover"
                                            v-if="item.supplier_img" /> -->
                                            <div class="table-lr__right">
                                                <p class="lr-user">{{ item.supplier_title }}[ID:{{ item.supplier_id }}]</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-buy-info table-head-base item-cont__base">
                                    <div class="table-sub">
                                        <p class="lr-user" style="margin-bottom: 4px">
                                            迟到：<span style="color: #4b93fa">{{ item.is_late == 0 ? "未迟到" : "已迟到" }}</span>
                                        </p>
                                        <p class="lr-user" style="margin-bottom: 4px">退/缺货数：{{ item.no_sku }}</p>
                                        <p class="lr-user">
                                            是否降级：<span style="color: #4b93fa">{{ item.is_demotion == 0 ? "未降级" : "已降级" }}</span
                                            >，降级数量：{{ item.demotion_num }}
                                        </p>
                                        <p class="lr-user">
                                            快递要求：<span style="color: #4b93fa">{{ item.express_require == 0 ? "早班" : "晚班" }}</span>
                                        </p>
                                        <p class="lr-user">换货数量：{{ item.exchange_nums }}</p>
                                        <p class="lr-user">
                                            质检不合格时：<span style="color: #4b93fa">{{ item.quality_require == 0 ? "退货" : "降级" }}</span>
                                        </p>
                                    </div>
                                </div>
                                <!-- <div class="table-oper table-head-base">
                                    <div class="table-sub table-sub-btn">
                                        <el-button link type="primary" class="theme-btn" @click="clickDetail(item)">查看详情</el-button>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </template>
                    <div class="table-none" v-if="arr_data.length == 0 && !loading">暂无数据</div>
                </div>
                <!-- 分页 -->
                <el-pagination
                    background
                    v-model:current-page="page"
                    v-model:page-size="pageSize"
                    :page-sizes="pageSizeNum"
                    :total="totalNums"
                    layout="total, sizes, prev, pager, next, jumper"
                >
                </el-pagination>
            </el-tab-pane>
        </el-tabs>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { onBeforeRouteLeave } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const store = useBaseStore()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getSite()
    getList()
})

// 离开-可以利用这个触发删除页面缓存操作
onBeforeRouteLeave((to, from, next) => {
    if (to.name === "OrderDetail") {
        store.setInclude("SeatList")
    } else {
        store.delInclude("SeatList")
    }
    next()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, arr_data, loading, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pageSize.value = val
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    page.value = val
    pubParams(getList)
})

/**
 * tab切换
 * @param {String} tabName 当前index
 * @param {Array} tabarr 数组
 */
const tabName = ref("0")
const tabArrs = ref([
    {
        label: "待放货",
        name: "0",
    },
    {
        label: "已放货",
        name: "1",
    },
])
const status = ref("0")
const handleTab = (pane) => {
    tabName.value = pane.index
    status.value = tabArrs.value[pane.index].name
    allChecked.value = false
    pubRefreshParams(getList)
}

function getList() {
    let day = area_time.value ? area_time.value.replace(/-/g, "") : ""
    let params = {
        page: page.value,
        limit: pageSize.value,
        type: status.value,
        order_sn: order_sn.value,
        uid: user_id.value,
        dc_id: sites_id.value,
        supplier_id: supplier_id.value,
        so: good_name.value,
        day,
        // shelve_type: shelveObj.value == null ? "" : shelveObj.value.shelve_type,
        // shelve_num: shelveObj.value == null ? "" : shelveObj.value.shelve_num,
    }
    getdata("storage/release/index", params)
}

// 搜索
const order_sn = ref("")
const area_time = ref("")
const user_id = ref("")
const sites_id = ref("")
const supplier_id = ref("")
const good_name = ref("") // 下单时间
const handleSearch = () => {
    search_btn.value = true
    allChecked.value = false
    pubRefreshParams(getList)
}
const disabledDate = (time) => {
    return time.getTime() > Date.now()
}

// 公用字段
const form_loading = ref(false)
// const itemObjs = ref({}) // item数据
// const itemIndex = ref({}) // item数据下标

/**
 * 全/反选
 * @param {Boolean} allChecked 全/反选值
 * @param {Array} ids 选中的值
 * @param {Function} changeAll 全/反选事件
 */
const allChecked = ref(false)
const ids = ref([])
const changeAll = (val) => {
    let arrs = []
    arr_data.value.map((item) => {
        item.is_select = val
        val && arrs.push(item.order_product_id)
    })
    ids.value = arrs
}
// 单选
const changeOne = () => {
    let flag = true,
        arrs = []
    for (let i = 0; i < arr_data.value.length; i++) {
        if (!arr_data.value[i].is_select) {
            flag = false
        } else {
            arrs.push(arr_data.value[i].order_product_id)
        }
    }
    allChecked.value = flag
    ids.value = arrs
}

// 批量放货
const clickPachSeat = () => {
    if (ids.value.length == 0) {
        proxy.$message({ message: "请选择需要放货的订单", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("storage/release/affirm", {
            order_product_ids: ids.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "批量放货成功！", type: "success" })
                tabName.value = "1"
                status.value = 1
                allChecked.value = false
                pubRefreshParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

// 站点信息
const siteArrs = ref([])
function getSite() {
    proxy.$axios
        .get("operation/dc")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                siteArrs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// const clickDetail = (row) => {
//     router.push({
//         path: "/Order/OrderDetail",
//         query: {
//             oid: row.order_id,
//         },
//     })
// }
</script>
<script>
export default {
    name: "SeatList",
}
</script>

<style lang="less" scoped>
.batch-oper {
    margin-top: @margin-xs;
    margin-bottom: @margin-lg;
}

.table-lr__img {
    width: 40px !important;
    height: 40px !important;
}

.table-lr__right {
    min-height: 40px !important;
}

.table-right-other {
    min-height: 20px !important;
}

.table-sub__p-mb {
    margin-bottom: 2px;
}

.table-head {
    background-color: #f5f7fa;
    width: 100%;
    height: 50px;
    border-radius: @radius-sm;
    border: 1px solid #ebeef5;
    overflow: hidden;
    margin-bottom: @margin-sm;
    padding: 0px @padding-md;
}

.table-body {
    margin-bottom: @margin-xl;

    .table-item {
        border: 1px solid #ebeef5;
        margin-bottom: @margin-sm;

        .table-item-head {
            background-color: #f5f7fa;
            width: 100%;
            height: 46px;
            overflow: hidden;
            padding: 0px @padding-md;
            border-bottom: 1px solid #ebeef5;

            .table-item__head-left {
                display: flex;
                align-items: center;

                .item-head__sn {
                    font-size: @font-size-md;
                    font-weight: bold;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;
                }

                .item-head__text {
                    font-size: @font-size-md;
                    color: @gray-8;
                    margin-right: @margin-mdl;
                    flex: none;

                    span {
                        color: @themes;
                    }
                }
            }
        }

        .table-item-cont {
            display: flex;

            & > div {
                padding: @padding-md @padding-xs;
                font-weight: 500;
                text-align: left;

                &:last-child {
                    text-align: left;

                    .el-button {
                        margin: 0 @margin-sm @margin-xs 0;
                    }
                }
            }

            .table-sub {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .table-sub-btn {
                flex-flow: row wrap;
                justify-content: flex-start;
                align-content: center;
            }

            .table-good {
                padding-left: @padding-md;
                padding-right: @padding-md;
                text-align: left;
            }

            .table-lr {
                margin-bottom: @margin-xs;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            .item-cont__base {
                border-right: 1px solid #ebeef5;
            }
        }
    }
}

.table-check {
    flex: none;
    margin-right: @margin-base;
}

.table-good {
    flex: 1;
}

.table-supp {
    width: 18%;
    flex: none;
    text-align: left;
}

.table-buy-info {
    width: 38%;
    flex: none;
    text-align: left;
}

.table-oper {
    width: 8%;
    flex: none;
}

.table-head-base {
    font-size: @font-size-md;
    font-weight: 700;
    color: @gray-8;
    padding: 0px @margin-xs;
}

:deep(.el-checkbox__inner) {
    width: 16px;
    height: 16px;

    &::after {
        width: 3px;
        height: 7px;
        left: 5px;
        top: 2px;
    }
}

:deep(.el-tabs) {
    .el-tabs__header {
        box-sizing: content-box;
    }

    .el-tabs__item {
        background: #f7f8fa;
        border-bottom: 1px solid #e4e7ed;

        &.is-active {
            color: #303133;
            background: #fff;
        }
    }
}

.table-none {
    font-size: @font-size-md;
    color: @gray-7;
    text-align: center;
    line-height: 40px;
}
</style>
